<template>
  <van-nav-bar title="编辑地址" left-arrow @click-left="onClickLeft">
    <template #left>
      <van-icon name="arrow-left" size="20" color="#1ba784" />
    </template>
  </van-nav-bar>
  <van-address-edit
    :area-list="AreaList"
    show-delete
    show-set-default
    show-search-result
    :address-info="curAddress"
    :search-result="searchResult"
    :area-columns-placeholder="['请选择', '请选择', '请选择']"
    @save="onSave"
    @delete="onDelete"
    @change-detail="onChangeDetail"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { showToast, showConfirmDialog } from 'vant'
import { areaList } from '@vant/area-data'
import { useUserStore } from '@/store/user.store'
import {
  createContact,
  getOneContact,
  delAddress,
  updateAddress
} from '@/api/modules/contact'
import { useRouter, useRoute } from 'vue-router'
import { tr } from 'element-plus/es/locales.mjs'
const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const searchResult = ref([])
const AreaList = ref(areaList)

// 保存
const isEdit = ref(false)
const onSave = async (data) => {
  const { userInfo } = userStore
  // console.log(userInfo)
  // console.log(data)
  const { name, tel, addressDetail, province, city, county, isDefault } = data
  const info = {
    contact_name: name,
    contact_phone: tel,
    user_id: userInfo.app_user_id,
    province,
    city,
    county,
    address_detail: addressDetail,
    is_default: isDefault ? '1' : '0'
  }
  // console.log(createContact)
  if (isEdit.value) {
    info.contact_id = route.query.id
    try {
      const res = await updateAddress(info)
      if (res.data) {
        showToast('修改成功')
        router.back()
      }
    } catch (error) {
      console.log('error', error)
    }
  } else {
    try {
      const res = await createContact(info)
      if (res.data) {
        showToast('新增成功')
        router.back()
      }
    } catch (error) {
      console.log('error', error)
    }
  }
}

// 删除当前联系地址
const onDelete = async () => {
  showConfirmDialog({
    title: '注意',
    message: '是否确认删除此收件地址？'
  })
    .then(() => {
      // on confirm
      const { id } = route.query
      if (id) {
        delAddress({ contact_id: id })
          .then((res) => {
            if (res.data) {
              showToast('删除成功')
              router.back()
            }
          })
          .catch((err) => {
            console.log('err', err)
          })
      }
    })
    .catch(() => {
      // on cancel
    })
}
const onChangeDetail = (val) => {
  // if (val) {
  //   searchResult.value = [
  //     {
  //       name: '黄龙万科中心',
  //       address: '杭州市西湖区'
  //     }
  //   ]
  // } else {
  //   searchResult.value = []
  // }
}

// ==========编辑操作==========
const curAddress = ref(null)
const getOne = async (id) => {
  try {
    const {
      data: { data }
    } = await getOneContact({ contact_id: id })
    console.log(data)
    data.name = data.contact_name
    data.tel = data.contact_phone
    data.addressDetail = data.address_detail
    data.isDefault = data.is_default === '1'
    curAddress.value = data
  } catch (error) {
    console.log('error', error)
  }
}

const onClickLeft = () => history.back()

// ==================== 生命周期 ====================

onMounted(() => {
  const { id } = route.query
  if (id) {
    // console.log('编辑')
    getOne(id)
    isEdit.value = true
  } else {
    // console.log('新增')
  }
})
</script>

<style lang="less" scoped>
:deep(.van-button--primary) {
  background-color: @green;
  border: solid @green;
}
:deep(.van-switch--on) {
  background-color: @green !important
  ;
}
</style>
